/*
 * @Author: Await
 * @Date: 2025-05-06 17:15:35
 * @LastEditors: Await
 * @LastEditTime: 2025-05-06 17:15:35
 * @Description: 主题坐标轴配置组件
 */
import React, { useState } from 'react';
import {
  Row,
  Col,
  Typography,
  ColorPicker,
  Divider,
  InputNumber,
  Select,
  Slider,
  Card,
  Tooltip,
  Switch,
  Tabs,
} from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import type { ThemeConfig } from '../../../types/chartTypes';

const { Title, Text } = Typography;
const { Option } = Select;
const { TabPane } = Tabs;

interface AxisConfigProps {
  value: ThemeConfig;
  onChange: (newValue: any) => void;
}

/**
 * 主题坐标轴配置组件
 * 分别配置直角坐标系、极坐标系等不同类型坐标轴的样式
 */
const AxisConfig: React.FC<AxisConfigProps> = ({ value, onChange }) => {
  const [axisType, setAxisType] = useState<string>('cartesian2d');
  
  // 初始化坐标轴配置
  const axisConfig = value.axis || {
    axisLine: {
      show: true,
      lineStyle: {
        color: '#333',
        width: 1,
      },
    },
    axisTick: {
      show: true,
      lineStyle: {
        color: '#333',
        width: 1,
      },
    },
    axisLabel: {
      show: true,
      color: '#333',
      fontSize: 12,
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#ccc'],
        width: 1,
        type: 'solid',
      },
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
      },
    },
  };

  // 更新轴线样式
  const updateAxisLine = (key: string, val: any) => {
    if (key.includes('.')) {
      const [mainKey, subKey] = key.split('.');
      onChange({
        ...value,
        axis: {
          ...axisConfig,
          axisLine: {
            ...axisConfig.axisLine,
            [mainKey]: {
              ...(axisConfig.axisLine[mainKey] || {}),
              [subKey]: val,
            },
          },
        },
      });
    } else {
      onChange({
        ...value,
        axis: {
          ...axisConfig,
          axisLine: {
            ...axisConfig.axisLine,
            [key]: val,
          },
        },
      });
    }
  };

  // 更新刻度线样式
  const updateAxisTick = (key: string, val: any) => {
    if (key.includes('.')) {
      const [mainKey, subKey] = key.split('.');
      onChange({
        ...value,
        axis: {
          ...axisConfig,
          axisTick: {
            ...axisConfig.axisTick,
            [mainKey]: {
              ...(axisConfig.axisTick[mainKey] || {}),
              [subKey]: val,
            },
          },
        },
      });
    } else {
      onChange({
        ...value,
        axis: {
          ...axisConfig,
          axisTick: {
            ...axisConfig.axisTick,
            [key]: val,
          },
        },
      });
    }
  };

  // 更新轴标签样式
  const updateAxisLabel = (key: string, val: any) => {
    onChange({
      ...value,
      axis: {
        ...axisConfig,
        axisLabel: {
          ...axisConfig.axisLabel,
          [key]: val,
        },
      },
    });
  };

  // 更新分隔线样式
  const updateSplitLine = (key: string, val: any) => {
    if (key.includes('.')) {
      const [mainKey, subKey] = key.split('.');
      onChange({
        ...value,
        axis: {
          ...axisConfig,
          splitLine: {
            ...axisConfig.splitLine,
            [mainKey]: {
              ...(axisConfig.splitLine[mainKey] || {}),
              [subKey]: val,
            },
          },
        },
      });
    } else {
      onChange({
        ...value,
        axis: {
          ...axisConfig,
          splitLine: {
            ...axisConfig.splitLine,
            [key]: val,
          },
        },
      });
    }
  };

  // 更新分隔区域样式
  const updateSplitArea = (key: string, val: any) => {
    if (key.includes('.')) {
      const [mainKey, subKey] = key.split('.');
      onChange({
        ...value,
        axis: {
          ...axisConfig,
          splitArea: {
            ...axisConfig.splitArea,
            [mainKey]: {
              ...(axisConfig.splitArea[mainKey] || {}),
              [subKey]: val,
            },
          },
        },
      });
    } else {
      onChange({
        ...value,
        axis: {
          ...axisConfig,
          splitArea: {
            ...axisConfig.splitArea,
            [key]: val,
          },
        },
      });
    }
  };

  // 更新分隔区域颜色
  const updateSplitAreaColor = (index: number, color: string) => {
    const newColors = [...(axisConfig.splitArea.areaStyle.color || ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'])];
    newColors[index] = color;
    
    onChange({
      ...value,
      axis: {
        ...axisConfig,
        splitArea: {
          ...axisConfig.splitArea,
          areaStyle: {
            ...(axisConfig.splitArea.areaStyle || {}),
            color: newColors,
          },
        },
      },
    });
  };

  return (
    <div className="theme-axis-config">
      <Tabs activeKey={axisType} onChange={setAxisType}>
        <TabPane tab="直角坐标系" key="cartesian2d">
          <Card title="坐标轴线" bordered={false} style={{ marginTop: 16 }}>
            <Row gutter={[16, 16]}>
              <Col span={6}>
                <Text>显示</Text>
                <div>
                  <Switch
                    checked={axisConfig.axisLine?.show}
                    onChange={(val) => updateAxisLine('show', val)}
                    size="small"
                  />
                </div>
              </Col>
              <Col span={6}>
                <Text>颜色</Text>
                <div>
                  <ColorPicker
                    value={axisConfig.axisLine?.lineStyle?.color || '#333'}
                    onChange={(color) => updateAxisLine('lineStyle.color', color.toHexString())}
                    showText
                  />
                </div>
              </Col>
              <Col span={6}>
                <Text>宽度</Text>
                <InputNumber
                  value={axisConfig.axisLine?.lineStyle?.width || 1}
                  onChange={(val) => updateAxisLine('lineStyle.width', val)}
                  min={1}
                  max={10}
                  style={{ width: '100%' }}
                />
              </Col>
              <Col span={6}>
                <Text>类型</Text>
                <Select
                  value={axisConfig.axisLine?.lineStyle?.type || 'solid'}
                  onChange={(val) => updateAxisLine('lineStyle.type', val)}
                  style={{ width: '100%' }}
                >
                  <Option value="solid">实线</Option>
                  <Option value="dashed">虚线</Option>
                  <Option value="dotted">点线</Option>
                </Select>
              </Col>
            </Row>
          </Card>

          <Card title="坐标轴刻度" bordered={false} style={{ marginTop: 16 }}>
            <Row gutter={[16, 16]}>
              <Col span={6}>
                <Text>显示</Text>
                <div>
                  <Switch
                    checked={axisConfig.axisTick?.show}
                    onChange={(val) => updateAxisTick('show', val)}
                    size="small"
                  />
                </div>
              </Col>
              <Col span={6}>
                <Text>颜色</Text>
                <div>
                  <ColorPicker
                    value={axisConfig.axisTick?.lineStyle?.color || '#333'}
                    onChange={(color) => updateAxisTick('lineStyle.color', color.toHexString())}
                    showText
                  />
                </div>
              </Col>
              <Col span={6}>
                <Text>宽度</Text>
                <InputNumber
                  value={axisConfig.axisTick?.lineStyle?.width || 1}
                  onChange={(val) => updateAxisTick('lineStyle.width', val)}
                  min={1}
                  max={10}
                  style={{ width: '100%' }}
                />
              </Col>
              <Col span={6}>
                <Text>长度</Text>
                <InputNumber
                  value={axisConfig.axisTick?.length || 5}
                  onChange={(val) => updateAxisTick('length', val)}
                  min={0}
                  max={20}
                  style={{ width: '100%' }}
                />
              </Col>
            </Row>
          </Card>

          <Card title="坐标轴标签" bordered={false} style={{ marginTop: 16 }}>
            <Row gutter={[16, 16]}>
              <Col span={6}>
                <Text>显示</Text>
                <div>
                  <Switch
                    checked={axisConfig.axisLabel?.show}
                    onChange={(val) => updateAxisLabel('show', val)}
                    size="small"
                  />
                </div>
              </Col>
              <Col span={6}>
                <Text>颜色</Text>
                <div>
                  <ColorPicker
                    value={axisConfig.axisLabel?.color || '#333'}
                    onChange={(color) => updateAxisLabel('color', color.toHexString())}
                    showText
                  />
                </div>
              </Col>
              <Col span={6}>
                <Text>字体大小</Text>
                <InputNumber
                  value={axisConfig.axisLabel?.fontSize || 12}
                  onChange={(val) => updateAxisLabel('fontSize', val)}
                  min={8}
                  max={24}
                  style={{ width: '100%' }}
                />
              </Col>
              <Col span={6}>
                <Text>旋转角度</Text>
                <InputNumber
                  value={axisConfig.axisLabel?.rotate || 0}
                  onChange={(val) => updateAxisLabel('rotate', val)}
                  min={-90}
                  max={90}
                  style={{ width: '100%' }}
                />
              </Col>
            </Row>
          </Card>

          <Card title="分隔线" bordered={false} style={{ marginTop: 16 }}>
            <Row gutter={[16, 16]}>
              <Col span={6}>
                <Text>显示</Text>
                <div>
                  <Switch
                    checked={axisConfig.splitLine?.show}
                    onChange={(val) => updateSplitLine('show', val)}
                    size="small"
                  />
                </div>
              </Col>
              <Col span={6}>
                <Text>颜色</Text>
                <div>
                  <ColorPicker
                    value={(axisConfig.splitLine?.lineStyle?.color || ['#ccc'])[0]}
                    onChange={(color) => {
                      updateSplitLine('lineStyle.color', [color.toHexString()]);
                    }}
                    showText
                  />
                </div>
              </Col>
              <Col span={6}>
                <Text>宽度</Text>
                <InputNumber
                  value={axisConfig.splitLine?.lineStyle?.width || 1}
                  onChange={(val) => updateSplitLine('lineStyle.width', val)}
                  min={1}
                  max={10}
                  style={{ width: '100%' }}
                />
              </Col>
              <Col span={6}>
                <Text>类型</Text>
                <Select
                  value={axisConfig.splitLine?.lineStyle?.type || 'solid'}
                  onChange={(val) => updateSplitLine('lineStyle.type', val)}
                  style={{ width: '100%' }}
                >
                  <Option value="solid">实线</Option>
                  <Option value="dashed">虚线</Option>
                  <Option value="dotted">点线</Option>
                </Select>
              </Col>
            </Row>
          </Card>

          <Card title="分隔区域" bordered={false} style={{ marginTop: 16 }}>
            <Row gutter={[16, 16]}>
              <Col span={6}>
                <Text>显示</Text>
                <div>
                  <Switch
                    checked={axisConfig.splitArea?.show}
                    onChange={(val) => updateSplitArea('show', val)}
                    size="small"
                  />
                </div>
              </Col>
              {axisConfig.splitArea?.show && (
                <>
                  <Col span={18}>
                    <Text>
                      区域颜色
                      <Tooltip title="偶数个颜色循环使用，形成间隔色带">
                        <InfoCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
                      </Tooltip>
                    </Text>
                    <div style={{ display: 'flex', gap: 16, marginTop: 8 }}>
                      {(axisConfig.splitArea?.areaStyle?.color || []).map((color, index) => (
                        <div key={index}>
                          <ColorPicker
                            value={color}
                            onChange={(color) => updateSplitAreaColor(index, color.toHexString())}
                            showText
                          />
                          <div style={{ fontSize: 12, color: '#999', marginTop: 4, textAlign: 'center' }}>
                            {index % 2 === 0 ? '奇数带' : '偶数带'}
                          </div>
                        </div>
                      ))}
                    </div>
                  </Col>
                </>
              )}
            </Row>
          </Card>
        </TabPane>
        
        <TabPane tab="极坐标系" key="polar">
          <div style={{ padding: 20 }}>
            <Typography.Paragraph>
              极坐标系配置与直角坐标系相同，您可以在直角坐标系中设置通用样式，它们将同样适用于极坐标系。
            </Typography.Paragraph>
          </div>
        </TabPane>

        <TabPane tab="雷达图" key="radar">
          <div style={{ padding: 20 }}>
            <Typography.Paragraph>
              雷达图坐标轴配置与直角坐标系类似，您可以在直角坐标系中设置通用样式，它们将同样适用于雷达图。
            </Typography.Paragraph>
          </div>
        </TabPane>
      </Tabs>
    </div>
  );
};

export default AxisConfig;